<template>
  <div :class="`right_side_drawer ${isOpen ? 'open' : 'close'}`">
    <div class="icon_switch" id="switch" @click="changeIsOpen">
      <span>辅助作业工具</span>
    </div>
    <div class="menu_detail" @click="handleCheck">
      <h3>查阅分析辅助作业工具</h3>
      <div class="content-item">
        <ul  v-for="item in filterCyfxfzData" :key="item.id">
          <li class="title">{{ item.meta.title | TitleFormat }}</li>
          <li v-for="children in item.children" :key="children.id">
            <span :data-pathname="children.name">{{ children.meta.title }}</span>
          </li>
        </ul>
        <ul>
          <li class="title">工程信息阅帐</li>
          <li><span data-pathname="sjxmzygl-yzzx-sbwzyz" data-name="sbjc"> 设备进场查询</span></li>
          <li><span data-pathname="sjxmzygl-yzzx-sbwzyz" data-name="sbcc"> 设备出场查询</span></li>
          <li><span data-pathname="sjxmzygl-yzzx-sbwzyz" data-name="wzxx"> 物资信息阅帐</span></li>
          <li><span data-pathname="sjxmzygl-yzzx-sbwzyz" data-name="fbdw"> 分包队伍查询</span></li>
          <li><span data-pathname="sjxmzygl-yzzx-sbwzyz" data-name="hgfbs"> 合格分包商查询</span></li>
          <li><span data-pathname="sjxmzygl-yzzx-sbwzyz" data-name="hmd"> 黑名单查询</span></li>
          <li><span data-pathname="sjxmzygl-yzzx-sbwzyz" data-name="htxx"> 合同信息查询</span></li>
        </ul>
      </div>
      <h3>审计模型辅助工具</h3>
      <div class="content-item">
        <ul>
          <li class="title">疑点一键梳理</li>
          <li><span data-pathname="sj-sjmxgl-yjcg-yjcgscq">疑点一键梳理</span></li>
        </ul>
        <ul  v-for="item in filterSjmxglData" :key="item.id">
          <li class="title">{{ item.meta.title }}</li>
          <li v-for="children in item.children" :key="children.id">
            <span :data-pathname="children.name">{{ children.meta.title }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { SjmxgjMenuList, CyfxfzMenuList } from '@/views/sj/sjxmzygl/sjxmss/jumpConfig'
export default {
  data() {
    return {
      isOpen: false,
      SjmxgjMenuList,
      CyfxfzMenuList,
    }
  },
  filters: {
    TitleFormat(title) {
      if (title === '科目分析视图') return '财务阅帐'
      else if (title === '指标分析视图') return '财务分析'
    },
  },
  computed: {
    filterSjmxglData() {
      if (this.SjmxgjMenuList.length > 0)
        return this.SjmxgjMenuList.filter((item) => {
          return item.children && item.children.length > 0
        })
      else return undefined
    },
    filterCyfxfzData() {
      if (this.CyfxfzMenuList.length > 0) {
        this.CyfxfzMenuList[0].children.splice(5, this.CyfxfzMenuList[0].children.length - 5)
        return this.CyfxfzMenuList
      } else return undefined
    },
  },
  methods: {
    changeIsOpen() {
      this.isOpen = !this.isOpen
    },
    handleCheck(event) {
      // 事件委托
      let {
        dataset: { pathname, name },
      } = event.target
      // pathname:路由跳转时跳转路径，$router.push() 时parasm和path冲突，所以使用name和params配合
      console.log(pathname, name)
      if (pathname) {
        switch (pathname) {
          case 'sj-sjmxgl-yjcg-yjcgscq':
            this.$bus.$emit('handleJumpRouter', pathname, 'DraftGenerator')
            break
          default:
            if (name) {
              this.$bus.$emit('handleJumpRouter', pathname, name)
            } else {
              this.$bus.$emit('handleJumpRouter', pathname)
            }
            break
        }
      }
    },
  },
}
</script>

<style lang="less" scoped>
.right_side_drawer {
  height: 84%;
  width: 800px;
  position: fixed;
  right: 0;
  top: 17%;
  padding: 10px 0px 10px 10px;
  display: flex;
  z-index: 100;
  transform: translateX(731px);
}

.icon_switch {
  width: 60px;
  height: 155px;
  writing-mode: vertical-lr;
  text-align: center;
  background-color: rgb(57, 86, 166);
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  font-size: 20px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.menu_detail {
  width: calc(100% - 60px);
  height: 100%;
  background-color: rgb(243, 246, 255);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  padding: 20px 20px;
  box-sizing: border-box;
  overflow: auto;
}

.open {
  transform: translateX(0px);
  transition: transform 0.3s linear;
}

.close {
  transform: translateX(731px);
  transition: transform 0.3s linear;
}

.menu_detail h3 {
  font-size: 20px;
  color: rgb(57, 86, 166);
  font-weight: 600;
  margin: 10px 0px 10px 0px;
}

.content-item {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 10px;
}

.content-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  color: rgb(102, 102, 102);
}

.content-item ul li {
  line-height: 35px;
}

.content-item ul li:not(.title) span {
  display: inline-block;
  border-bottom: 1px solid;
  cursor: pointer;
}

.content-item ul li:not(.title) span:hover {
  color: rgb(249, 161, 63);
}

.content-item ul .title {
  font-size: 16px;
  font-weight: 550;
  color: black;
}
</style>